<template>
  <div>

    <h1 style="text-align: center">会员信息</h1>
    <div style="margin-top: 30px">
      <el-row style="left: 10px">
        <el-button type="success" icon="el-icon-plus" circle @click="addAccountDialogFormVisible=true"></el-button>
      </el-row>
      <el-table

        :data="tableData"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-number="left" inline class="demo-table-expand">
              <el-form-item label="姓名">
                <span>{{ props.row.name }}</span>
              </el-form-item>

              <el-form-item label="联系方式">
                <span>{{ props.row.number}}</span>
              </el-form-item>

              <el-form-item label="序号" style="margin-left: auto ">
                <span>{{ props.row.id }}</span>
              </el-form-item>

              <el-form-item label="家庭地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>


              <el-form-item label="身高">
                <span>{{ props.row.height }}</span>
              </el-form-item>

              <el-form-item label="入会时间">
                <span>{{ props.row.date }}</span>
              </el-form-item>

              <el-form-item label="体重">

                <span>{{ props.row.weight }}</span>
              </el-form-item>

              </el-form-item>


              <el-form-item label="会员情况">
                <span>{{ props.row.member }}</span>
              </el-form-item>

              <el-form-item label="性别">
                <span>{{ props.row.sex }}</span>
              </el-form-item>

              <el-form-item label="个人爱好">
                <span>{{ props.row.hobby }}</span>
              </el-form-item>

              <el-form-item label="年龄">
                <span>{{ props.row.age }}</span>
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="运动号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name">
        </el-table-column>
        <el-table-column
          label="会员情况"
          prop="member"
        >
        </el-table-column>

        <el-table-column width="120">
          <template #default="scope">
            <el-row>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="update(scope.$index, scope.row)"
              />
              <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"/>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-dialog title="修改用户" :visible.sync="updateAccountDialogFormVisible">
      <el-form
        :model="addAccountForm" :rules="rules" ref="updateAccountForm"
        label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input v-model="updateAccountForm.name" style="width:35%"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="updateAccountForm.sex">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="updateAccountForm.age" style="width:35%"/>
        </el-form-item>
        <el-form-item label="入会时间">
          <el-date-picker
            v-model="updateAccountForm.date"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择入会时间"
          />
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="updateAccountForm.address" style="width:35%"/>
        </el-form-item>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="updateAccountForm.height" style="width:35%"/>
        </el-form-item>

        <el-form-item label="体重">
          <el-input v-model="updateAccountForm.weight" style="width:35%"

          />
        </el-form-item>

        <el-form-item label="会员情况">
          <el-select v-model="updateAccountForm.member" placeholder="请选择你的会员情况">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="updateAccountForm.number" style="width:35%"/>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="updateAccountForm.hobby" style="width:35%"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleUpdateUser()">立即修改</el-button>
          <el-button @click="updateAccountDialogFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加用户" :visible.sync="addAccountDialogFormVisible">
      <el-form
        :model="addAccountForm"
        label-width="80px"
      >
        <el-form-item label="姓名">
          <el-input v-model="addAccountForm.name" style="width:35%"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addAccountForm.sex" placeholder="请选择性别">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addAccountForm.age" style="width:35%"/>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="addAccountForm.height" style="width:35%"/>
        </el-form-item>

        <el-form-item label="体重">
          <el-input v-model="addAccountForm.weight" style="width:35%"

          />
        </el-form-item>
        <el-form-item label="入会时间">
          <el-date-picker
            v-model="addAccountForm.strDate"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择入会时间"
          />
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="addAccountForm.address" style="width:35%"/>
        </el-form-item>
        <el-form-item label="会员情况">
          <el-select v-model="addAccountForm.member" placeholder="请选择你的会员">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="addAccountForm.number" style="width:35%"/>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="addAccountForm.hobby" style="width:35%"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleAddUser()">立即添加</el-button>
          <el-button @click="addAccountDialogFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  import {getUserPage, addUser, deleteUser, updateUser} from '@/api/user'
  import {Message} from 'element-ui'
  import { mapGetters } from 'vuex'
  import {getCurrentUserNo} from '@/utils/auth'

  export default {
    data() {
      return {
        textarea: '',
        options: [
          {
            value: '一般用户',
            label: '一般用户'
          }, {
            value: '普通会员',
            label: '普通会员'
          }, {
            value: '超级会员',
            label: '超级会员'
          }, {
            value: '永久会员',
            label: '永久会员'
          }],
        option: [
          {
            value: '学生会主席',
            label: '学生会主席'
          }, {
            value: '纪律委员',
            label: '纪律委员',
            disabled: true
          }, {
            value: '学习委员',
            label: '学习委员'
          }, {
            value: '团支书',
            label: '团支书'
          }, {
            value: '普通学生',
            label: '普通学生'
          }],
        option1: [
          {
            value: '男',
            label: '男'
          }, {
            value: '女',
            label: '女',
            disabled: true

          }],
        addAccountForm: {
          name: '',
          height: '',
          sex: '',
          age: '',
          member: '',
          date: null,
          strDate: '',
          address: '',
          number: '',
          hobby: '',
          weight: '',
          founder:''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ], address: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            {pattern: /^1[34578]\d{9}$/, message: '请输入正确格式的手机号码'}
          ],
        },
        updateAccountForm: {
          name: '',
          sex: '',
          height: '',
          //sexObj: '',
          age: '',
          member: '',
          date: null,
          strDate: '',
          address: '',
          number: '',
          hobby: '',
          weight: ''
        },
        addAccountDialogFormVisible: false,
        updateAccountDialogFormVisible: false,
        tableData: [],
        listQuery: {
          currentUser: '',
          height: '',
          name: '',
          //sexObj: {},
          age: '',
          sex: '',
          member: '',
          number: '',
          data: '',
          address: '',
          hobby: '',
          weight: '',
          currentPage: 1,
          pageSize: 100
        }
      }
    },
    created() {
      this.initPage()
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    methods: {
      initPage() {
        // 获取本地当前用户
        if (this.name) {
          this.listQuery.currentUser = this.name
        } else {
          this.listQuery.currentUser = getCurrentUserNo()
        }

        console.log("当前用户",this.listQuery.currentUser)
        getUserPage(this.listQuery).then(res => {
          if (res.code === 20000) {
            this.tableData = res.data.list
            this.listQuery.currentPage = res.data.pageNum
            this.listQuery.pageSize = res.data.pageCount
          } else {
            this.tableData = []
            this.listQuery.currentPage = 1
            this.listQuery.pageSize = 10
          }
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
      },
      handleCurrentChange(val) {
        this.listQuery.currentPage = val
      },
      //修改会员信息
      handleUpdateUser() {
        updateUser(this.updateAccountForm).then(res => {
          console.log(this.updateAccountForm)
          if (res.code === 20000) {
            Message({
              message: '修改信息成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.initPage()
            this.updateAccountDialogFormVisible = false
          } else {
            Message({
              message: res.msg,
              type: 'error',
              duration: 3 * 1000
            })
          }
        })
      },

      //删除用户信息
      handleDelete(row) { // 执行后端 删除方法
        this.$confirm('你确定要删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteUser(row.id)
          this.$message({type: 'success', message: '删除成功!'})
          this.initPage()
        }).catch(() => {
          this.$message({type: 'success', message: '已取消删除'})
        })
      },


      update(index, row) {
        this.updateAccountDialogFormVisible = true // 编辑信息模态框显示
        console.log(row)
        this.updateAccountForm = Object.assign({}, row)
        /* 获得所有数据显示在编辑信息模态框里面*/
      },


      //增加用户信息
      handleAddUser() {
        // 获取本地当前用户
        if (this.name) {
          this.addAccountForm.founder = this.name
        } else {
          this.addAccountForm.founder = getCurrentUserNo()
        }
        addUser(this.addAccountForm).then(res => {
          if (res.code === 20000) {
            Message({
              message: '添加成功',
              type: 'success',
              duration: 3 * 1000
            })
            this.initPage()
            this.addAccountDialogFormVisible = false
          } else {
            Message({
              message: res.msg,
              type: 'error',
              duration: 3 * 1000
            })
          }
        })
      },
    }
  }
</script>
